<template>
  <div class="batchAddStaffModalBody">
    <div class="matchType">
      <div class="uploadFileBox" @click="resetFile">
        <input type="file" accept=".xlsx,.xls" class="uploadFile" ref="uploadFileRef" @change="fileChange" />

        <img src="./images/uploadImg.svg" alt="上传" class="uploadImg" />

        <div class="uploadSt">
          <span class="uploadBtn"> 选择文件 </span>
        </div>

        <p class="uploadStMsg" v-if="modalData.uploadState === ''">拖拽文件到这里上传</p>
        <p class="uploadStError" v-if="modalData.uploadState === 'fail'">
          <span class="uploadStErrorFs">上传失败！</span>
          <span class="uploadStErrorTip">失败原因：{{ modalData.errorMsg }}</span>
        </p>

        <p class="uploadStError" v-if="modalData.uploadState === 'success'">
          <span class="upload-success">上传成功！</span>
        </p>

        <div class="uploadLoading" v-show="modalData.uploading">
          <a-spin></a-spin>
        </div>
      </div>

      <div class="exportModalOperateBtn">
        <span class="cancelBtn" @click="closeModal">取 消</span>
        <span class="affirmBtn" @click="affirm">提 交</span>
      </div>
    </div>
  </div>
  <ChooseSheetModal v-model:visible="chooseSheetModalInfo.visible" v-if="chooseSheetModalInfo.visible" :sheetList="chooseSheetModalInfo.sheetList" @closeModal="closeChooseSheetModal" />
</template>

<script setup>
import { throttle } from 'lodash-es'
import { reactive, ref, computed } from 'vue'
import { message } from 'ant-design-vue'
import ChooseSheetModal from '@/components/ChooseSheetModal/index.vue'
import { readExcelSheet, getExcelSheetNames } from '@/utils/excelSheet'
const modalData = reactive({
  uploadState: '',
  uploading: false,
  errorMsg: '',
  file: null,
  sheetNo: null
})

const uploadFileRef = ref(null)

const emit = defineEmits(['closeModal'])

const fileChange = event => {
  const file = event.target.files[0]
  const index = file.name.lastIndexOf('.')
  const type = file.name.substring(index, file.name.length).toLowerCase()
  const fileTypeList = ['.xlsx', '.xls']
  if (fileTypeList.indexOf(type) < 0) {
    message.warning('请上传excel格式的文件')
    return false
  }

  uploadFile(file)
}

const uploadFile = async file => {
  modalData.uploading = true
  modalData.file = file
  if (!file) return
  try {
    chooseSheetModalInfo.sheetList = await getExcelSheetNames(file)
    modalData.uploading = false
    chooseSheetModalInfo.visible = true
  } catch (error) {
    console.error('Error reading excel file:', error)
    modalData.uploading = false
  }
}

const resetFile = () => {
  uploadFileRef.value = ''
  modalData.file = null
  modalData.uploadState = ''
  modalData.errorMsg = ''
  modalData.sheetNo = null
  chooseSheetModalInfo.sheetList = []
}

const affirm = throttle(async () => {
  if (!modalData.file) {
    message.warning('请先上传文件')
    return false
  }
  try {
    emit('closeModal', { file: modalData.file, sheetNo: modalData.sheetNo })
  } catch (error) {
    console.error('Error reading excel file:', error)
  }
}, 1000)

const closeModal = () => {
  emit('closeModal', false)
}

const chooseSheetModalInfo = reactive({
  visible: false,
  sheetList: []
})

const closeChooseSheetModal = res => {
  chooseSheetModalInfo.visible = false
  if (res) {
    const { sheetNo } = res
    modalData.sheetNo = sheetNo
    modalData.uploadState = 'success'
  }
}
</script>

<style lang="less" scoped>
.batchAddStaffModalBody {
  .zdy-radio {
    display: flex;
    gap: 12px;
    .zdy-radio-item + .zdy-radio-item {
      margin-left: 24px;
    }
  }
  .matchType {
    .matchTypeTit {
      position: relative;
      height: 22px;
      line-height: 22px;
      padding-left: 16px;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 16px;
      &::before {
        position: absolute;
        content: '';
        left: 0px;
        top: 5px;
        width: 4px;
        height: 12px;
        background:#5975fb;
      }
    }
  }
  .uploadFileBox {
    position: relative;
    height: 194px;
    background: #ffffff;
    padding: 0.1px;
    border: #e3e3e3 solid 1px;
    border-radius: 4px;
    padding-top: 23px;
    margin-top: 30px;
    .uploadFile {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      opacity: 0;
      z-index: 10;
      &::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        cursor: pointer;
      }
    }
    .uploadImg {
      display: block;
      width: 40px;
      margin: 0px auto;
    }
    .uploadSt {
      margin-top: 16px;
      .uploadBtn {
        position: relative;
        display: block;
        width: 96px;
        text-align: center;
        height: 36px;
        line-height: 34px;
        border-radius: 4px;
        border: #e3e3e3 solid 1px;
        color: rgba(0, 0, 0, 0.85);
        margin: 0px auto 16px;
        user-select: none;
        &:hover {
          opacity: 0.7;
        }
        &:active {
          opacity: 0.95;
        }
        input {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 100%;
          height: 100%;
          opacity: 0;
        }
      }
    }

    .uploadStMsg {
      font-size: 12px;
      text-align: center;
      line-height: 22px;
      color: rgba(0, 0, 0, 0.45);
      margin: 0px;
    }
    .uploadStError {
      color: rgba(255, 0, 0, 0.85);
      text-align: center;
      .uploadStErrorFs {
        display: block;
        margin-bottom: 2px;
        font-size: 14px;
        line-height: 20px;
      }
      .uploadStErrorTip {
        display: block;
        font-size: 12px;
        line-height: 16px;
      }
    }
    .uploadLoading {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 0px;
      top: 0px;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.6);
    }
  }
  .uploadTip {
    margin: 8px 0px 24px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 12px;
  }
  .exportModalOperateBtn {
    margin-top: 24px;
    text-align: right;
    span {
      display: inline-block;
      padding: 0px 16px;
      height: 36px;
      line-height: 34px;
      border-radius: 4px;
      font-size: 14px;
      margin-left: 8px;
      cursor: pointer;
      user-select: none;
      &:hover {
        opacity: 0.7;
      }
      &:active {
        opacity: 0.95;
      }
      &.cancelBtn {
        border: #d9d9d9 solid 1px;
        color: rgba(0, 0, 0, 0.65);
        background: #ffffff;
      }
      &.affirmBtn {
        border: #5975fb solid 1px;
        color: #ffffff;
        background: #5975fb;
      }
    }
  }
}

.upload-success {
  color: #0f9d58;
}
</style>
